<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /*div {
        width: 300px;
        height: 150px;
        background-color: pink;
       
        圆角边框
        border-radius:length
        length 参数值可以为数值或百分比的形式
        
        border-radius: 10px;
      }*/
      .yuanxing {
        width: 200px;
        height: 200px;
        background-color: pink;
        /*border-radius: 100px;*/
        border-radius: 50%;
      }
      .juxing {
        width: 300px;
        height: 100px;
        background-color: pink;
        border-radius: 50px;
      }
      .radius {
        width: 200px;
        height: 200px;
        /* 
       border-radius: 10px 20px 30px 40px;
        border-top-left-radius: ;
       border-top-right-radius: ;
       border-bottom-right-radius: ;
       border-bottom-left-radius: ;
       */
        border-radius: 20px 40px;
        background-color: pink;
      }
      /*
      盒子阴影
      不占用空间
      box-shadow:h-shadow v-shadow blur spread color inset
      h-shadow 必需，水平阴影位置，允许负值
      v-shadow 必需，垂直阴影位置，允许负值
      blur 可选，模糊距离
      spread 可选，阴影的尺寸
      color 可选，阴影的颜色
      inset 可选，将外部阴影（outset)改为内部阴影
      */
      .shadow {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px;
      }
      /*原先盒子没有影子，当我们鼠标经过就添加阴影效果*/
      .shadow:hover {
        box-shadow: 10px 10px 10px 10px rgb(0, 0, 0, 0.3);
      }
      /*
      文字阴影
      text-shadow:h-shadow v-shadow blur color
      h-shadow 必需，水平阴影位置，允许负值
      v-shadow 必需，垂直阴影位置，允许负值
      blur 可选，模糊距离
      color 可选，阴影的颜色
      */
      .textshadow {
        font-size: 50px;
        color: coral;
        font-weight: 700;
      }
      .textshadow:hover {
        text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);
      }
    </style>
  </head>
  <body>
    <div></div>
    1.圆形的做法
    <div class="yuanxing"></div>
    2.圆角矩形的做法
    <div class="juxing"></div>
    3.可以设置不同的圆角
    <div class="radius"></div>

    <div class="shadow"></div>
    <div class="textshadow">我有阴影</div>
  </body>
</html>
